<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>乘车点概况</title>
    <link rel="stylesheet" href="/css/public.css">
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/echarts.js"></script>
    <script src="/js/common.js"></script>
    <%--地图--%>
    <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=f50df840d14861c95415ec7742d42d86&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.DistrictSearch"></script>
</head>

<body>
    <div class="container">
        <%--顶部导航--%>
        <div class="nav-area">
            <div class="nav-left">
                <a href="/index.do">&lt; 整体概况</a>
            </div>
            <div class="nav-center">
                <h1>乘车点概况</h1>
            </div>
            <div class="nav-right">
                <a href="/airShowArea.do">航展周边概况 &gt;</a>
            </div>
        </div>

        <%--滚动信息--%>
        <div class="message-area">
            <ul class="roll__list">
            </ul>
        </div>

        <div class="point-area">

            <%--上部--%>
            <div class="point-top-area">

                <%--左上-专线巴士--%>
                <div class="point-topleft-area public-box">
                    <div class="public-box-title">
                        专线巴士
                    </div>
                    <%--数据--%>
                    <div class="point-topleft-data">
                        <p>
                            投入<span class="carSum">0</span>辆
                        </p>
                    </div>
                    <%--图表--%>
                    <div class="point-topleft-chart" id="carChart">

                    </div>
                </div>

                <%--右上-预约、候车、已运送人数比较--%>
                <div class="point-topright-area public-box">
                    <div class="public-box-title">
                        预约、候车、已运送人数比较
                    </div>
                    <%--图示--%>
                    <div class="chart-label">
                        <span>
                            <em class="yellow-label"></em> 候车人数
                        </span>
                        <span>
                            <em class="blue-label"></em> 已运送人数
                        </span>
                    </div>
                    <%--数据--%>
                    <div class="point-topright-data">
                        <div class="text-select" id="pointSelect">
                            <span></span>
                            <ul class="scroll-box">
                                    <li data-type="point" data-id="-1">
                                        全部乘车点
                                    </li>
                                <c:forEach items="${dataMap.airRidePointDtoList}" var="dto">
                                    <%--<c:if test="${dto.airRidePoint.airParkingLot.name !=null}">--%>
                                        <li data-type="point" data-id="${dto.airRidePoint.id}">
                                                ${dto.airRidePoint.route>0?dto.airRidePoint.route:''} ${dto.airRidePoint.name}
                                        </li>
                                    <%--</c:if>--%>
                                </c:forEach>
                                <%--<li data-type="point" data-id="1">--%>
                                    <%--香洲汽车客运站--%>
                                <%--</li>--%>
                            </ul>
                        </div>
                        今日预约
                        <em id="chart_appointSum">0</em> 人，已运送
                        <em id="chart_tookSum">0</em> 人
                    </div>
                    <%--图表--%>
                    <div class="point-topright-chart" id="personChart">

                    </div>
                </div>
            </div>

            <%--下部--专线数据汇总及预测--%>
            <div class="point-bottom-area public-box">
                <div class="public-box-title">
                    专线数据汇总及预测
                </div>
                <%--数据--%>
                <div class="point-bottom-data">
                    <div class="text-select" id="tripSelect">
                        <span></span>
                        <ul class="scroll-box">
                            <c:forEach items="${dataMap.airRidePointDtoList}" var="dto">
                                <c:if test="${dto.airRidePoint.airParkingLot.name !=null}">
                                    <li data-type="trip" data-id="${dto.airRidePoint.id}">
                                        <em>${dto.airRidePoint.route>0?dto.airRidePoint.route:''}${dto.airRidePoint.name}</em> ↔ <em>${dto.airRidePoint.airParkingLot.name}</em>
                                    </li>
                                </c:if>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
                <%--数据表格--%>
                <div class="point-bottom-table">

                    <%--人数表格--%>
                    <div class="data-table person-table">
                        <div class="data-table-tr">
                            <div class="data-table-th">
                            </div>
                            <div class="data-table-th">
                                预约人数
                            </div>
                            <div class="data-table-th">
                                已运送人数
                            </div>
                            <div class="data-table-th">
                                候车人数
                            </div>
                        </div>
                        <div class="data-table-tr">
                            <div class="data-table-th">
                                <span>最新汇报</span>
                                <span style="opacity: .8;"> <em id="time"></em> </span>
                            </div>
                            <div class="data-table-td">
                                -
                            </div>
                            <div class="data-table-td">
                                -
                            </div>
                            <div class="data-table-td">
                                <span id="table_waitingSum"></span>
                            </div>
                        </div>
                        <div class="data-table-tr">
                            <div class="data-table-th">
                                <span>当天</span>
                                <span style="opacity: .8;">( <em class="current_date"></em> )</span>
                            </div>
                            <div class="data-table-td">
                                <span id="table_appointSum"></span>
                            </div>
                            <div class="data-table-td">
                                <span id="table_tookSum"></span>
                            </div>
                            <div class="data-table-td">
                                -
                            </div>
                        </div>
                    </div>

                    <%--车辆表格--%>
                    <div class="data-table car-table">
                        <div class="data-table-tr">
                            <div class="data-table-th">
                            </div>
                            <div class="data-table-th">
                                投入车辆
                            </div>
                            <div class="data-table-th">
                                等待发车
                            </div>
                            <div class="data-table-th">
                                已发车
                            </div>
                            <div class="data-table-th">
                                已到达
                            </div>
                            <div class="data-table-th">
                                已返程
                            </div>
                            <div class="data-table-th">
                                即将回到
                            </div>
                        </div>
                        <div class="data-table-tr">
                            <div class="data-table-th">
                                <span>当前时段</span>
                                <span style="opacity: .8;">( <em class="time_current"></em> )</span>
                            </div>
                            <div class="data-table-td">
                                <span class="carSum_table">0辆</span>
                                <em class="seatSum">0座</em>
                            </div>
                            <div class="data-table-td">
                                <span class="waitCar">0辆</span>
                                <em>0座</em>
                            </div>
                            <div class="data-table-td">
                                <span class="ridingCar">0辆</span>
                                <em>0座</em>
                            </div>
                            <div class="data-table-td">
                                <span class="returningCar">0辆</span>
                                <em>0座</em>
                            </div>
                            <div class="data-table-td">
                                <span class="returnedCar">0辆</span>
                                <em>0座</em>
                            </div>
                            <div class="data-table-td">
                                <span id="backing"></span>
                                <em></em>
                            </div>
                        </div>
                        <div class="data-table-tr">
                            <div class="data-table-th">
                                <span>下个时段</span>
                                <span style="opacity: .8;">( <em class="time_current_next"></em> )</span>
                            </div>
                            <div class="data-table-td">
                                <span class="carSum_table">0辆</span>
                                <em class="seatSum">0座</em>
                            </div>
                            <div class="data-table-td">
                                <span class="waitCar">0辆</span>
                                <em>0座</em>
                            </div>
                            <div class="data-table-td">
                                -
                            </div>
                            <div class="data-table-td">
                                -
                            </div>
                            <div class="data-table-td">
                                -
                            </div>
                            <div class="data-table-td">
                                <span id="backing_next"></span>
                                <em></em>
                            </div>
                        </div>
                    </div>

                    <%--行程表格--%>
                    <div class="data-table trip-table">
                        <div class="data-table-tr">
                            <div class="data-table-th">
                            </div>
                            <div class="data-table-th">
                                去程
                            </div>
                            <div class="data-table-th">
                                返程
                            </div>
                        </div>
                        <div class="data-table-tr">
                            <div class="data-table-th">
                                平均耗时
                            </div>
                            <div class="data-table-td">
                                <span>
                                    <span id="go_time"></span>
                                </span>
                            </div>
                            <div class="data-table-td">
                                <span>
                                    <span id="back_time"></span>
                                </span>
                            </div>
                        </div>
                        <div class="data-table-tr">
                            <div class="data-table-th">
                                前一趟耗时
                            </div>
                            <div class="data-table-td">
                                <span>
                                    <span id="least_go_time"></span>
                                </span>
                            </div>
                            <div class="data-table-td">
                                <span>
                                    <span id="least_back_time"></span>
                                </span>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <%@ include file="common.jsp" %>
    <script src="/js/airRidePoints.js" type="text/javascript"></script>
    <script>
        $(function () {
            //初始化
            airRidePoint.init();

            //下拉选择
            $(document).on("click",".point-area .text-select li",function () {
                var optionType = $(this).data("type"),
                        optionVal = $(this).data("id");
                var newHtml = $(this).html();
                $(this).closest("ul").prev("span").html(newHtml);
                if( optionType == "point") changePointChart(optionVal);
                if( optionType == "trip"){
                    changeTripChart(optionVal);
                    //绑定详情弹窗功能
                    $("#tripSelect>span em").eq(0).attr({
                        "class": "show-pointinfo",
                        "data-pointid": $(this).data("id")
                    })
                }
            });
        });

        //切换乘车点人数图表
        function changePointChart(pointId){
            console.log("改变乘车点图表："+ pointId);
            current_point_id = pointId;
            var option = getEchart2Option(current_point_id);
            airRidePoint.chart2.setOption(option);
        }

        //切换行程数据表格
        function changeTripChart(tripId){
            console.log("改变行程表格："+ tripId);
            current_trip_id = tripId;
            updateTable(current_trip_id);
        }
    </script>

</body>
</html>